<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
    />
    <!-- 公共样式 -->
    <link rel="stylesheet" href="../../assets/common/common.css" />
    <!-- 字体图标 -->
    <link rel="stylesheet" href="../../assets/iconfont/iconfont.css" />
    <!-- 考情规则规则样式 -->
    <link rel="stylesheet" href="./Clock.css" />
    <title>考勤打卡</title>
  </head>
  <body>
    <div class="Clock-index">
      <!-- 头部 -->
      <div class="header bg-fff flex jc-sb aic">
        <div class="l">
          <i onclick="fanhui()" class="iconfont icon-zuojiantou"></i>
        </div>
        <div class="c tac">考勤打卡</div>
        <div class="r"></div>
      </div>
      <!-- 用户名 -->
      <div class="username bg-fff flex">
        <div class="avatar">
          <img src="./img/__80px_u3817.png" alt="" />
        </div>
        <div class="text-c mr-10 fdc jc-sa">
          <div class="name">吴珊珊</div>
          <div class="group">考勤组：销售一组</div>
        </div>
        <div class="text-r flex jc-fe">
          <div onclick="tongji()" class="text fdc jc-sb aic">
            <i class="iconfont icon-tongji"></i>
            <span>统计</span>
          </div>
          <div onclick="guize()" class="text ml-20 fdc jc-sb aic">
            <img src="./img/u3828.png" alt="" />
            <span>考勤规则</span>
          </div>
        </div>
      </div>
      <!-- 主要 -->
      <div class="main">
        <!-- 每一次打卡 -->
        <div class="list">
          <div class="item-tb">
            <div class="text-boxt">
              <i class="iconfont icon-yuanquan"></i>
              <span>上班打卡</span>
              <span>9:00</span>
            </div>
            <div class="text-boxb flex">
              <img src="./img/u3805.png" alt="" />
              <div class="text">
                <p class="p1">
                  <span>打卡时间</span>
                  <span>09:01:01</span>
                </p>
                <p class="p2">
                  <span>打卡地点:</span>
                  <span>北京市朝阳区朝阳公园南路1号</span>
                </p>
              </div>
            </div>
          </div>
          <div class="item-tb">
            <div class="text-boxt">
              <i class="iconfont icon-yuanquan"></i>
              <span>下班打卡</span>
              <span>18:00</span>
            </div>
            <div class="text-boxb flex">
              <img src="" alt="" />
              <div onclick="clock()" class="text fg1 ">
                <div class="text1 fdc aic jc-sb">
                  <div class="btn fdc aic jc-sb">
                    <span class="span1">下班打卡</span>
                    <span class="span2">18:01:01</span>
                  </div>
                  <div class="place">
                    <img src="./img/u3809.png" alt="" />
                    <span>已进入打卡范围</span>
                  </div>
                </div>
              </div>
              <div class="success tac">
                  <img src="./img/对勾-copy.png" alt="">
                  <p>打卡成功</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="./Clock.js"></script>
  </body>
</html>
